<template>
	<Header :title="t('recordDetails.title')" />
	<view class="content">
		<view class="flex-box">
			<view class="span" v-for="(item, index) in detailList" :key="index">
				<up-text
					:text="item.title"
					bold
					size="18"
					color="#000000e6"
					style="margin-bottom: 10px"></up-text>
				<up-text
					:text="item.label"
					size="12"
					color="rgba(0, 0, 0, 0.4)"></up-text>
				<up-avatar
					shape="square"
					size="27"
					:src="item.src"
					class="pic"
					customStyle="margin: -3px 5px -3px 0"></up-avatar>
			</view>
		</view>
	</view>
	<view class="content map-content" v-if="detailData?.drawing_path">
		<up-text
			:text="`${t('report.plan.mapName')} ${detailData.map_name}`"
			size="16"
			bold
			color="#000"></up-text>
		<view class="map-box">
			<Map :mapUrl="detailData.drawing_path" :showPath="false" :showZone="false"/>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Header from "@/components/header/index.vue";
import { useReportDetailStore } from "@/stores/index";
import { onLoad } from "@dcloudio/uni-app";
import moment from "moment-timezone";
import Map from "@/components/Map/index.vue";
import { useI18n } from "vue-i18n";
// 国际化
const { locale, t } = useI18n();
import type * as type from "../type";
const detailStore = useReportDetailStore();
const detailData = ref<type.DeviceItem | null>(null);
const detailType = ref(0);
const timeZoneStore = useUniversalStorage<string>(
	"SELECTED_TIMEZONE",
	"Asia/Shanghai"
);
const detailList = reactive([
	{
		title: "361.76 m²",
		label: t("recordDetails.betime"),
		src: "/static/image/info/time.png",
	},
	{
		title: "361.76 m²",
		label: t("recordDetails.endime"),
		src: "/static/image/info/time.png",
	},
	{
		title: "title",
		label: t("recordDetails.area"),
		src: "/static/image/info/area.png",
	},
	{
		title: "title",
		label: t("recordDetails.time"),
		src: "/static/image/info/timeCost.png",
	},
	{
		title: "title",
		label: t("recordDetails.speed"),
		src: "/static/image/info/elocity.png",
	},
	{
		title: "title",
		label: t("recordDetails.rate"),
		src: "/static/image/info/cleaned.png",
	},
]);
const processData = () => {
	const record =
		detailType.value == 1
			? detailData.value?.clean_record
			: detailData.value;

	if (!record) return;

	// 处理时间相关字段
	const [startTime, endTime] =
		detailType.value == 1
			? [
					record.start_time
						? moment
								.tz(record.start_time * 1000, "Asia/Shanghai")
								.tz(timeZoneStore.value)
						: null,
					record.end_time
						? moment
								.tz(record.end_time * 1000, "Asia/Shanghai")
								.tz(timeZoneStore.value)
						: null,
			  ]
			: [record.start_time, record.end_time];

	// 设置详情项
	detailList[0].title = startTime
		? typeof startTime === "string"
			? startTime
			: startTime.format("MM/DD HH:mm")
		: "";
	detailList[1].title = endTime
		? typeof endTime === "string"
			? endTime
			: endTime.format("MM/DD HH:mm")
		: "";
	detailList[2].title = `${Number(record.area || 0).toFixed(2)} m²`;

	// 处理其他字段
	detailList[3].title = record.cleaning_time
		? `${(record.cleaning_time / 60).toFixed(0)}${t(
				"recordDetails.minute"
		  )}${(record.cleaning_time % 60).toFixed(0)}${t("recordDetails.sec")}`
		: "0.00";

	detailList[4].title = `${((record.average_velocity || 0) * 3.6).toFixed(
		2
	)} km/h`;
	detailList[5].title = `${((record.progress || 0) * 100).toFixed(2)}%`;
};
onLoad((options) => {
	detailType.value = options?.type ? options.type : 0;
	detailData.value = detailStore.reportDetailData;
	processData();
});
</script>

<style lang="scss" scoped>
.content {
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	background: #fff;
	margin: 20rpx 30rpx;
	.flex-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 4%;
		.span {
			flex: 48%;
			background: linear-gradient(
				151deg,
				rgb(247, 249, 254) 0%,
				rgb(243, 245, 248) 100%
			);
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx 10rpx 20rpx;
			position: relative;
			:deep(.u-text__value) {
				z-index: 99;
			}
			.pic {
				position: absolute;
				bottom: 16rpx;
				right: 10rpx;
				z-index: 1;
			}
		}
	}
}
.map-content {
	height: 42vh;
	min-height: 42vh;
	max-height: 42vh;
	box-sizing: border-box;
	.map-box {
		margin-top: 5px;
		width: 100%;
		background: #cdcdcd;
		height: calc(100% - 44px);
	}
}
</style>
